<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
  <title>HELLO，AMAP!</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "62c0d051bb80ad16ee5f856e7f54b44e",
  };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "a329219cdacef71b0addbc88034c9b39", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      const map = new AMap.Map("container");
      const infoWindow = new AMap.InfoWindow({
        //创建信息窗体
        isCustom: true, //使用自定义窗体
        content: "<div>HELLO,AMAP!</div>", //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45),
      });
      const onMarkerClick = function (e) {
        infoWindow.open(map, e.target.getPosition()); //打开信息窗体
        //e.target就是被点击的Marker
      };
      const marker = new AMap.Marker({
        position: [116.481181, 39.989792],
      });
      map.add(marker);
      marker.on("click", onMarkerClick); //绑定click事件

      const lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
      ];
      const polyline = new AMap.Polyline({
        path: lineArr, //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      map.add(polyline);
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>

</html>